<script setup>
import { onMounted, ref } from 'vue';
import { getCollectionListAPI, cancelCollectAPI } from '@/apis/collect';
import { ElMessage } from 'element-plus';

const tabChange = () => {
    reqData.value.page = 1
    //发送请求
    getCollectionList()
}
const reqData = ref({
    page: 1,
    pageSize: 20,
    sortField: 'publishTime'
})
const getCollectionList = async () => {
    goodsList.value = (await getCollectionListAPI(reqData.value)).data.collectionsList
}
const cancelCollcet = async (id) => {
    await cancelCollectAPI(id)
    //重新获取数据
    getCollectionList()
    try {
        ElMessage({ type: 'success', message: '取消收藏成功！' })
    } catch (error) {
        ElMessage({ type: 'error', message: '取消收藏失败！' })
    }

}
onMounted(() => getCollectionList())
const goodsList = ref([])
</script>
<template>
    <div class="container">
        <div class="sub-container">
            <el-tabs v-model="reqData.sortField" @tab-change="tabChange">
                <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
                <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
                <el-tab-pane label="最高销量" name="salesNum"></el-tab-pane>
                <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
            </el-tabs>
            <div class="holder-container" v-if="goodsList.length === 0">
                <el-empty description="你似乎还没有收藏商品呢" />
            </div>
            <div v-else class="goods-list">
                <div v-for="goods in goodsList" class="goods-item-wrapper" :key="goods.id">
                    <RouterLink :to="`/detail/${goods.goodsId}`" class="goods-item">
                        <img v-img-lazy="goods.img" alt="">
                        <p class="name ellipsis">{{ goods.name }}</p>
                        <p class="desc ellipsis">{{ goods.desc }}</p>
                        <p class="price">&yen;{{ goods.price }}</p>
                    </RouterLink>
                    <el-button type="primary" class="btn" @click="cancelCollcet(goods.id)">取消收藏</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.holder-container {
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sub-container {
    padding: 20px 10px;
    background-color: #fff;

    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
}

.goods-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    /* 自动适应列数 */
    gap: 30px;
    /* 商品间距 */
    padding: 20px;
}

.goods-item-wrapper {
    position: relative;

    .btn {
        position: absolute;
        bottom: -40px;
        /* 调整按钮位置 */
        left: 50%;
        transform: translateX(-50%);
        margin-top: 10px;
        width: max-content;
    }
}

.goods-item {
    display: block;
    padding: 20px;
    text-align: center;
    transition: all 0.5s;
    border: 1px solid #f5f5f5;
    /* 添加边框增强视觉效果 */

    &:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }

    img {
        width: 160px;
        height: 160px;
        object-fit: cover;
    }

    p {
        padding-top: 10px;
    }

    .name {
        font-size: 16px;
    }

    .desc {
        color: #999;
        height: 29px;
    }

    .price {
        color: $priceColor;
        font-size: 20px;
    }
}
</style>